<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        table{
            border-collapse: collapse;
            width: 100%;
        }
        th,td{
            border: 1px solid #ccc;
            padding: 10px;
        }
    </style>
</head>

<body>
   <div style="padding: 20px;">
    监听/发送的事件名称<input type="text" id="eventName">
    发送的数据<input type="text" id="value">
    <button id="input-ok">监听事件</button>
    <button id="emit-ok">发送事件</button>
    <button id="off">移除所有事件</button>
    <button id="clearAllRecords">移除所有记录</button>
    <button id="printEvents">打印所有events</button>
   </div>
   <div style="height:calc(100vh - 100px);overflow-y: auto;">
    <table id="record" style="border: 1px solid #ccc;margin-top: 20px;"></table>
   </div>

    <script type="module">
        import { emitx, createRecorder } from './emitx.js'
        const recorder = createRecorder({
            // 当有记录变化的时候
            changeRecord: () => Promise.resolve().then(renderRecords)
        })
        const { getRecords, clearRecords }  = recorder
        const { emit,on, off, getEvents } = emitx({recorder})

        function $on(selector,eventName, fn){
            return document.querySelector(selector).addEventListener(eventName, fn)
        }

        // 事件调用函数
        async function inputFn({eventName, value}){
           console.log('ok', value)
           await new Promise(r => setTimeout(r,2000))
           console.log(`触发事件【${eventName}】,值为【${value}】`)
           return value
        }
       
        $on('#input-ok','click',function(){
            const eventName = document.querySelector('input#eventName').value
            on(eventName, inputFn)
            console.log(`开始监听事件【${eventName}】`)
        })
        $on('#emit-ok','click',async function(){
            const eventName = document.querySelector('input#eventName').value
            const value = document.querySelector('input#value').value
            console.log(`发送的事件名称【${eventName}】,发送的值【${value}】`)
            const res = await emit(eventName, {
                eventName,
                value
            })
            console.log(res)
            console.log(`emit事件完成,一共完成${res?.length}个函数调用`, res)
        })
        $on('#off','click',function(){
            off()
            console.log(`清空所有事件`)
        })
        // 清除所有记录
        $on('#clearAllRecords','click',function(){
            clearRecords()
            renderRecords()
        })
        // 打印events
        $on('#printEvents','click',() => {
            console.log(getEvents(),111111111)
        })
        function renderRecords(){
            const recordEl = document.querySelector('#record')
            const startHtml = `
            <tr>
                <th style="width:200px">事件类型</th>
                <th style="width:200px">事件名称</th>
                <th >回调函数</th>
                <th style="width:400px">记录时间</th>
            </tr>`

            const records = getRecords()
            console.log('记录', records)
            recordEl.innerHTML = records.reduce((last, next) => {
                return last + `<tr>
                <td>${next.type}</td>
                <td>${next.eventName}</td>
                <td>${next?.callback}</td>
                <td>${next.date}</td>
            </tr> `
            },startHtml)
        }
    </script>
</body>

</html>